<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="example">
		  <p>Original message: "{{ message }}"</p>
		  <p>Computed reversed message: "{{ reversedMessage }}"</p>
		  <p>Reversed message: "{{ reversedMessage() }}"</p>
	   </div>
	   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	   <script type="text/javascript">
	   	   //1.基础例子
//			   	   var vm = new Vue({
//					  el: '#example',
//					  data: {
//					    message: 'Hello'
//					  },
//					  computed: {
//					    // 计算属性的 getter
//					    reversedMessage: function () {
//					      // `this` 指向 vm 实例
//					      return this.message.split('').reverse().join('')
//					    }
//					  },
//					  methods: {
//						  reversedMessage: function () {
//						    return this.message.split('').reverse().join('')
//						  }
//					  }
//				  })
			   	   
			 //2.计算属性缓存 vs 方法
			     //我们可以通过在表达式中调用方法来达到同样的效果,两种方式的最终结果确实是完全相同的。
			     /*不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
			      *这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数*/
			     //相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
			     
			 //3.计算属性 vs 侦听属性
//			      var vm = new Vue({
//					  el: '#demo',
//					  data: {
//					    firstName: 'Foo',
//					    lastName: 'Bar',
//					    fullName: 'Foo Bar'
//					  },
//					  watch: {
//					    firstName: function (val) {
//					      this.fullName = val + ' ' + this.lastName
//					    },
//					    lastName: function (val) {
//					      this.fullName = this.firstName + ' ' + val
//					    }
//					  }
//				  })
//                var vm = new Vue({
//					  el: '#demo',
//					  data: {
//					    firstName: 'Foo',
//					    lastName: 'Bar'
//					  },
//					  computed: {
//					    fullName: function () {
//					      return this.firstName + ' ' + this.lastName
//					    }
//					  }
//				 })

                //4.计算属性的setter
                          // ...
//							computed: {
//							  fullName: {
//							    // getter
//							    get: function () {
//							      return this.firstName + ' ' + this.lastName
//							    },
//							    // setter
//							    set: function (newValue) {
//							      var names = newValue.split(' ')
//							      this.firstName = names[0]
//							      this.lastName = names[names.length - 1]
//							    }
//							  }
//							}
						  // ...
                //5.侦听器
	                /*虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
	                 *这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
	                 *当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。*/
	   </script>
	</body>
</html>
